<template>
	<view class="merchantDetails">
		<view class="topBar">
			<view class="bar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="search" :style="{ height: navbarHeight + 'px' }">
				<image @click="onBack" class="search_back" src="/static/pages/image/back.png" mode="widthFix"></image>
				<view class="search_content">
					<image class="search_icon" @click="onSearch" src="/static/pages/image/search_icon.png"
						mode="widthFix"></image>
					<view class="line" />
					<input v-model="search" @blur="onSearch" class="search_input" placeholder="请输入搜索内容" type="text"
						value="" />
				</view>
			</view>
		</view>

		<view class="head_info">
			<image class="info_img" :src="shop.shop_image" mode=""></image>
			<view class="info_content">
				<view class="info_head">
					<view class="info_left">
						<text class="title">{{shop.shop_name}}</text>
						<view class="sunui_star">
							<SunuiStar :starSize='"0.5em"' :defaultStar="3" :disabledStar="true" />
						</view>
					</view>
					<view class="info_right" :class="{'is_collect':is_collect == 1}" @click="collect">
						{{is_collect == 1? '已收藏' : '收藏'}}
					</view>
				</view>

				<view class="info_bottom">
					<text>月销{{shop.sold_count}}</text>
					<text>开店时间:{{shop.add_time}}</text>
				</view>
			</view>
		</view>

		<view class="store_introduction">
			<!-- <view class="head">
				<text>主营业务</text>
				<image class="right" src="/static/pages/image/area_right.png" mode="widthFix"></image>
			</view> -->
			<view class="content">{{shop.introduction}}</view>
			<view class="footer">
				<view class="footer_item footer_left" @click="onCallPhone">
					<image class="item_icon1" src="/static/pages/image/phone-icon.png" mode="widthFix"></image>
					<view class="item_content">
						<text class="item_title">店主电话</text>
						<text class="item_txt"></text>
					</view>
				</view>

				<view class="footer_line" />

				<view class="footer_item footer_right" @click="toMap">
					<image class="item_icon2" src="/static/pages/image/location-icon.png" mode="widthFix"></image>
					<view class="item_content">
						<text class="item_title">{{getAddress}}</text>
						<text class="item_txt">{{shop.address}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="recommend">
			<!-- <view class="recommend_head">
				<text class="haed_txt">店铺推荐</text>
				<view class="head_right">
					<text class="right_txt">查看全部</text>
					<image class="right_icon" src="/static/pages/image/right-red.png" mode=""></image>
				</view>
			</view> -->

			<view class="recommend_content">
				<view class="recommend_item" v-for="item in goods_recommend" :key="item.id">
					<image class="item_img" :src="getImages(item.image)" mode=""></image>
					<text class="item_title">{{item.title}}</text>
					<view class="item_money">
						<text style="font-size: 28rpx;">¥</text>
						<text style="font-size: 35rpx;">{{item.sell_price}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="line" />

		<view class="commodity_list">
			<view class="commodity_item" v-for="item in goods_list" :key="item.id" @click="toDetails(item.id)">
				<image class="item_img" :src="getImages(item.image)" mode=""></image>
				<view class="item_content">
					<text class="title">{{item.title}}</text>
					<view class="item_money">
						<text style="font-size: 28rpx;">¥</text>
						<text style="font-size: 35rpx;">{{item.sell_price}}</text>
					</view>
					<text class="sales">月销{{item.sold_count}}</text>
				</view>
				<button class="btn" type="default">立即抢购</button>
			</view>
		</view>

		<u-loadmore :status="status" @loadmore="loadmore" />

		<view class="tabbar">
			<view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
				<view class="tabbar-item" v-for="(item, index) in list" :key="index"
					@click="tabbarChange(item.path,index)">
					<image class="item-img" :src="item.icon_a" v-if="current == index"></image>
					<image class="item-img" :src="item.icon" v-else></image>
					<view class="item-name" :class="{'tabbarActive': current == index}" v-if="item.text">
						{{item.text}}
					</view>
					
					<view class="unreadCount" v-if="unreadCount && index == 1">
						<template  v-if="unreadCount > 99">
							99+
						</template>
						<template  v-else>
							{{unreadCount}}
						</template>
					</view>
				</view>
			</view>
			<new-order />
		</view>
		<!-- <view-tabbar :current="0"></view-tabbar> -->
	</view>
</template>

<script>
	// 获取系统状态栏的高度
	let systemInfo = uni.getSystemInfoSync();
	var app = getApp();
	import SunuiStar from '@/components/sunui-star/sunui-star.vue'
	import ULoadmore from '@/components/u-loadmore/u-loadmore.vue'
	// import Tabbar from '@/pagesA/tabber/tabber.vue'
	export default {
		data() {
			return {
				statusBarHeight: systemInfo.statusBarHeight,
				shop_id: null,
				search: '',
				leftid: 1,
				goods_list: [], //商品列表
				goods_recommend: [], //商品推荐
				shop: {}, // 商品
				status: 'loadmore',
				is_collect: null,
				paddingBottomHeight: 0, //苹果X以上手机底部适配高度
				list: [{
						text: '返回首页',
						icon: '/static/pages/image/shouyewdj_btn.png', //未选中图标
						icon_a: '/static/pages/image/shouyedj_btn.png', //选中图片
						path: "", //页面路径
					}, {
						text: '客服',
						icon: '/static/pages/image/wodewdj_btn.png',
						icon_a: '/static/pages/image/wodedj_btn.png',
						path: "",
					}, {
						text: '分类',
						icon: '/static/pages/image/shouyewdj_btn.png', //未选中图标
						icon_a: '/static/pages/image/shouyedj_btn.png', //选中图片
						path: "recommendation",
					}, {
						text: '购物车',
						icon: '/static/pages/image/shouchewdj_btn.png',
						icon_a: '/static/pages/image/shouchedj_btn.png',
						path: 'message',
					},
					{
						text: '我的',
						icon: '/static/pages/image/wodewdj_btn.png',
						icon_a: '/static/pages/image/wodedj_btn.png',
						path: "user",
					}
				],
				unreadCount:0
			}
		},
		components: {
			SunuiStar,
			ULoadmore,
			// 'view-tabbar': Tabbar
		},
		computed: {
			// 转换字符数值为真正的数值
			navbarHeight() {
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				return height
			},
			getAddress(address) {
				let province = ''
				if (this.shop.address) {
					const proExp = ".+[省]"
					province = this.shop.address.match(new RegExp(proExp)); // 省
					province = province ? province[0] : ''
				}
				return province
			}
		},
		onLoad(option) {
			this.shop_id = option.id
			this.onReset()
			this.getShopGoods()

			// let that = this;
			// uni.getSystemInfo({
			// 	success: function(res) {
			// 		let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
			// 		model.forEach(item => {
			// 			//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
			// 			if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
			// 				that.paddingBottomHeight = 40;
			// 			}
			// 		})
			// 	}
			// });
		},
		onShow() {},
		methods: {
			tabbarChange(path, index) {
				if (index == 0) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else if (index == 1) {
					this.$store.dispatch('checkoutConversation', `C2C${this.shop.uid}`)
				} else if (index == 2) {
					uni.redirectTo({
						url: '/pagesA/tabber/b'
					})
				} else if (index == 3) {
					uni.redirectTo({
						url: '/pagesA/tabber/c'
					})
				} else if (index == 4) {
					uni.switchTab({
						url: '/pages/mine/index'
					})
				}
			},
			collect() {
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "shop.index.shop_collect",
						uid: uni.getStorageSync('uid'),
						shop_id: this.shop_id
					},
					success: res => {
						uni.showToast({
							title: '操作成功',
							duration: 2000,
							icon: 'none'
						});

						this.onReset()
						this.getShopGoods()
					},
					fail: res => {}
				});
			},
			onCallPhone() {
				uni.makePhoneCall({
					phoneNumber: this.shop.phone
				});
			},
			toMap() {
				if (!this.shop.latitude && !this.shop.longitude) {
					uni.showToast({
						title: '获取位置失败',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				const lat = parseFloat(this.shop.latitude)
				const log = parseFloat(this.shop.longitude)
				uni.openLocation({
					latitude: lat,
					longitude: log,
					success: function() {}
				});
			},
			// 详情
			toDetails(id) {
				uni.navigateTo({
					url: '/pagesA/productDetails/productDetails?id=' + id
				});
			},
			onReset() {
				this.status = 'loadmore'
				this.leftid = 1
				this.goods_list = []
			},
			onSearch() {
				this.onReset()
				this.getShopGoods()
			},
			getShopGoods() {
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "shop.index.shop_goods",
						uid: uni.getStorageSync('uid'),
						shop_id: this.shop_id,
						search: this.search,
						leftid: this.leftid
					},
					success: e => {
						const {
							goods_list,
							// goods_recommend,
							is_collect,
							shop
						} = e.data.data
						this.goods_list = this.goods_list.concat(goods_list)
						// this.goods_recommend = goods_recommend
						this.is_collect = is_collect
						this.shop = shop
						this.status = goods_list.length < 6 ? "nomore" : "loadmore"
						this.leftid += 1
						this.getConversationProfile()
					}
				});
			},
			getConversationProfile(){
				wx.$app.getConversationProfile(`C2C${this.shop.uid}`)
					.then(({
						data: {
							conversation
						}
					}) => {
						this.unreadCount = conversation.unreadCount
					})
			},
			onBack() {
				uni.navigateBack()
			},
			getImages(images) {
				let img = JSON.parse(images).shift()
				return img
			},
			// 点击加载更多
			loadmore() {
				if (this.status == "nomore") return
				this.getShopGoods()
			}
		}
	}
</script>

<style scoped lang="scss">
	.topBar {
		border-bottom: 1px solid #FCFCFD;

		.bar {
			width: 100%;
		}

		.search {
			display: flex;
			align-items: center;

			.search_back {
				margin-left: 29upx;
				width: 25upx;
			}

			.search_icon {
				width: 27upx;
			}

			.search_content {
				margin-left: 21upx;
				display: flex;
				align-items: center;
				width: 425upx;
				height: 60upx;
				background: #F1F2F2;
				border-radius: 30px;
				padding: 0 24upx;
				box-sizing: border-box;
			}

			.line {
				width: 3upx;
				height: 37upx;
				background-color: #ACACAC;
				margin: 0 14upx;
			}

			.search_input {
				font-size: 24upx;
				font-weight: 500;
				box-sizing: border-box;
			}
		}
	}

	.head_info {
		margin: 40upx 0;
		display: flex;
		padding: 0 30upx 0 25upx;
		box-sizing: border-box;

		.info_img {
			width: 141upx;
			height: 141upx;
			border-radius: 10upx;
			margin-right: 20upx;
		}

		.info_content {
			flex: 1;
			display: flex;
			flex-direction: column;

			.info_head {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.info_right {
				width: 138upx;
				height: 64upx;
				background: linear-gradient(141deg, #0CD8C2, #0BC2AE);
				border-radius: 32upx;
				font-size: 30upx;
				color: #FFFFFF;
				text-align: center;
				line-height: 64upx;
			}

			.is_collect {
				background: #B6B5B5;
			}
		}

		.title {
			font-size: 32upx;
			font-weight: 800;
			color: #242424;
		}

		.sunui_star {
			width: 160upx;
		}

		.info_bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 22upx;
			font-weight: 500;
			color: #535353;
		}
	}


	.store_introduction {
		padding: 0 50upx 0 20upx;
		box-sizing: border-box;
		margin-bottom: 26upx;

		.head {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.right {
				width: 15upx;
			}
		}

		.content {
			margin-top: 35upx;
			font-size: 24upx;
			color: #535353;
		}

		.footer {
			margin-top: 80upx;
			display: flex;
			align-items: center;

			.footer_line {
				width: 1upx;
				height: 64upx;
				background: #DFDFDF;
			}

			.footer_item {
				flex: 1;
				display: flex;
				align-items: center;

				.item_content {
					margin-left: 25upx;
					display: flex;
					flex-direction: column;

					.item_title {
						font-size: 24upx;
						font-weight: bold;
						color: #323232;
					}

					.item_txt {
						margin-top: 5upx;
						font-size: 18upx;
						color: #909090;
					}
				}

				.item_icon1 {
					width: 32upx;
				}

				.item_icon2 {
					width: 22upx;
				}
			}

			.footer_right {
				margin-left: 42upx;
			}
		}
	}


	/* 推荐 */
	.recommend {
		// padding: 38upx 33upx 32upx 20upx;
		box-sizing: border-box;

		.recommend_head {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.haed_txt {
				font-size: 32upx;
				font-weight: 800;
				color: #0F0F0F;
			}

			.head_right {
				display: flex;
				align-items: center;
				color: #e26630;
				font-size: 28upx;

				.right_icon {
					width: 9upx;
					height: 17upx;
					margin-left: 10upx;
				}
			}
		}

		.recommend_content {
			display: flex;
			justify-content: space-between;
		}

		.recommend_item {
			width: 33%;

			.item_img {
				width: 225upx;
				height: 224upx;
				border-radius: 10upx;
			}

			.item_title {
				font-size: 26upx;
				font-weight: 500;
				color: #444444;
			}

			.item_money {
				line-height: 28upx;
				font-weight: 500;
				color: #FF4E31;
			}
		}
	}

	.line {
		width: 100%;
		height: 17upx;
		background: #F2F2F2;
	}

	.commodity_list {
		margin-top: 34upx;
		padding: 0 46upx 100upx 31upx;
		box-sizing: border-box;

		.commodity_item+.commodity_item {
			margin-top: 21upx;
		}

		.commodity_item {
			display: flex;
			position: relative;
			padding: 26upx 0 37upx 0;
			box-sizing: border-box;

			.item_img {
				width: 241upx;
				height: 241upx;
				border-radius: 10upx;
				margin-right: 14upx;
			}

			.item_content {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;
			}

			.title {
				font-size: 32upx;
				font-weight: 500;
				color: #242424;
			}

			.item_money {
				line-height: 28upx;
				font-weight: 500;
				color: #FF4E31;
			}

			.sales {
				font-size: 22upx;
				font-weight: 500;
				color: #535353;
			}

			.btn {
				position: absolute;
				right: 22upx;
				bottom: 43upx;
				width: 143upx;
				height: 64upx;
				line-height: 64upx;
				background: linear-gradient(141deg, #0CD8C2, #0BC2AE);
				border-radius: 32upx;
				font-size: 26upx;
				font-weight: 500;
				color: #FFFFFF;
				padding: 0;
				margin: 0;
			}
		}
	}


	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		z-index: 999;
		
		.tabbarActive {
			color: #79D5AD !important;
		}

		.tabbar {


			.tabbar-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 100rpx;
				position: relative;
				
				.item-img {
					margin-bottom: 4rpx;
					width: 46rpx;
					height: 46rpx;
				}

				.item-name {
					font-size: 26rpx;
					color: #A3A3A3;
				}
				
				.unreadCount{
					position: absolute;
					top: 0;
					right: -10px;
					color: #FFFFFF;
					z-index: 1;
					box-sizing: border-box;
					font-size: 12px;
					background-color: #fb5250;
					border-radius: 60upx;
					padding: 4upx 14upx 6upx;
				}
			}
		}
	}
</style>
